<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //Object.defineProperty()  
        /*  创建一个可控的对象 
             修改一个对象
         */


        // 创建一个可控对象
        // var val = "张三"
        // var obj = Object.defineProperty({}, "name", {
        //     get: function () {
        //         console.log("get.....");
        //         return val
        //     },
        //     set: function (newvalue) {
        //         console.log("修改了", newvalue);
        //         if (val !== newvalue) {
        //             val = newvalue;
        //         }
        //     },
        //     enumerable: true,
        //     configurable: true
        // })
        // obj.name;
        // obj.name = "李四";
        // console.log(obj);


        //修改一个对象为可控对象
        // var obj1 = {
        //     name: "张三",
        //     age: 20
        // }
        // //修改属性为可控
        // Object.defineProperty(obj1, "age", {
        //     get: function () {
        //         return 20
        //     },
        //     set: function (newvalue) {
        //         console.log("修改", newvalue);
        //     },
        //     enumerable: true,
        //     configurable: true
        // })






        //封装观察数据函数
        var obj = {
            name: "王五",
            age: 20
        }

        function observe(obj) {
            for(var key in obj) {
                Object.defineProperty(obj,key,{
                    get:function(){
                        console.log("get");
                        return obj[key];
                    },
                    set:function(newvalue) {
                        if(obj[key] !== newvalue) {
                            obj[key] = newvalue;
                        }
                    },
                    configurable: true,
                    enumerable:true
                })
            
            }
        }
        observe(obj);
        console.log(obj);
    </script>
</body>

</html>